// 定义一个自执行的函数，接收 window 和 document 作为参数
(function flexible(window, document) {
    // 获取文档根元素
    const docEl = document.documentElement;
    // 获取设备的像素比，如果不支持则默认为 1
    const dpr = window.devicePixelRatio || 1;

    // 调整 body 的字体大小
    function setBodyFontSize() {
        // 如果文档中已经存在 body 元素
        if (document.body) {
            // 设置 body 的字体大小为 12 * dpr 像素
            document.body.style.fontSize = (12 * dpr) + 'px';
        }
        // 如果文档中不存在 body 元素
        else {
            // 等待 DOMContentLoaded 事件触发后再次调用 setBodyFontSize
            document.addEventListener('DOMContentLoaded', setBodyFontSize);
        }
    }
    // 调用 setBodyFontSize
    setBodyFontSize();

    // 设置 1rem 等于视口宽度的 1/10
    function setRemUnit() {
        // 计算 rem 的值为文档根元素的宽度除以 10
        const rem = docEl.clientWidth / 10;
        // 设置文档根元素的字体大小为 rem 像素
        docEl.style.fontSize = rem + 'px';
    }
    // 调用 setRemUnit
    setRemUnit();

    // 在页面大小变化时重新设置 rem 单位
    window.addEventListener('resize', setRemUnit);
    // 在页面显示时（包括从缓存加载）检测是否需要重新设置 rem 单位
    window.addEventListener('pageshow', function(e) {
        // 如果页面是从缓存中加载的
        if (e.persisted) {
            // 重新设置 rem 单位
            setRemUnit();
        }
    });

    // 检测是否支持 0.5px 的边框
    if (dpr >= 2) {
        // 创建一个虚拟的 body 元素
        const fakeBody = document.createElement('body');
        // 创建一个测试元素
        const testElement = document.createElement('div');
        // 设置测试元素的边框为 0.5px 的透明边框
        testElement.style.border = '.5px solid transparent';
        // 将测试元素添加到虚拟的 body 元素中
        fakeBody.appendChild(testElement);
        // 将虚拟的 body 元素添加到文档根元素中
        docEl.appendChild(fakeBody);
        // 如果测试元素的偏移高度为 1 像素，则表示支持 0.5px 的边框
        if (testElement.offsetHeight === 1) {
            // 给文档根元素添加一个名为 'hairlines' 的类，用于标记支持 0.5px 边框的情况
            docEl.classList.add('hairlines');
        }
        // 从文档根元素中移除虚拟的 body 元素
        docEl.removeChild(fakeBody);
    }
}(window, document));
